<template>
  <div>
    <el-col :span="21"
      ><div class="grid-content bg-purple-dark">
        <el-input
          v-model="search"
          placeholder="请输入要搜索的检查名称"
          style="width:240px"
          suffix-icon="el-icon-search"
        >
        </el-input>
        <el-button @click="jcxmsearch">搜索</el-button>
      </div></el-col
    >
    <!-- 添加 -->
    <el-button
      size="mini"
      type="primary"
      @click="
        dialogFormVisible1 = true;
        add();
      "
      >添加</el-button
    >
    <!-- 检查项目表 -->
    <el-table
      :data="tableData"
      style="width: 100%;margin:auto;line-height:20px;marginTop: 20px;"
    >
      <el-table-column prop="checkNo" label="检查项目代号" align="center">
      </el-table-column>
      <el-table-column prop="checkName" label="检查项目名称" align="center">
      </el-table-column>
      <el-table-column prop="checkType" label="项目类型" align="center">
      </el-table-column>
      <el-table-column prop="checkPay" label="价格" align="center">
      </el-table-column>
      <el-table-column prop="checkUnit" label="单位" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        layout="prev, pager, next"
        @current-change="changePage"
        :page-size="pagesize"
        :pageCount="maxPage"
        :total="count"
      ></el-pagination>
    </div>

    <!-- 添加弹框 -->
    <el-dialog
      title="添加检查项目"
      :visible.sync="dialogFormVisible1"
      width="30%"
      :append-to-body="true"
    >
      <el-form :model="form1">
        <el-form-item label="检查项目代号" :label-width="formLabelWidth">
          <el-input v-model="form1.checkNo" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="检查项目名称" :label-width="formLabelWidth">
          <el-input v-model="form1.checkName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目类型" :label-width="formLabelWidth">
          <el-input v-model="form1.checkType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input v-model="form1.checkPay" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单位" :label-width="formLabelWidth">
          <el-input v-model="form1.checkUnit" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            dialogFormVisible1 = false;
            addqued();
          "
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 修改弹框 -->
    <el-dialog
      title="修改检查项目"
      :visible.sync="dialogFormVisible2"
      width="30%"
      :append-to-body="true"
    >
      <el-form :model="form2">
        <el-form-item label="检查项目代号" :label-width="formLabelWidth">
          <el-input
            v-model="form2.checkNo"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="检查项目名称" :label-width="formLabelWidth">
          <el-input v-model="form2.checkName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目类型" :label-width="formLabelWidth">
          <el-input v-model="form2.checkType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input v-model="form2.checkPay" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单位" :label-width="formLabelWidth">
          <el-input v-model="form2.checkUnit" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            dialogFormVisible2 = false;
            editqued();
          "
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapActions } from "vuex";
// import { URL } from "../../../../utils/fanapi";
// import { delFn } from "../../../../utils/delfan";
export default {
  name: "",
  components: {},
  data() {
    return {
      search: "",
      tableData: [],
      pagesize: 3,
      nowpage: 1,
      count: 0,
      //添加
      dialogFormVisible1: false,
      form1: {
        checkNo: "",
        checkName: "",
        checkType: "",
        checkPay: "",
        checkUnit: "",
        person_no: "",
      },
      formLabelWidth: "120px",
      // 修改
      dialogFormVisible2: false,
      form2: {
        checkNo: "",
        checkName: "",
        checkType: "",
        checkPay: "",
        checkUnit: "",
        person_no: "",
      },
    };
  },
  computed: {
    maxPage() {
      return Math.ceil(this.count / this.pagesize);
    },
  },
  methods: {
    ...mapActions(["tongyong"]),
    changePage(val) {
      this.nowpage = val;
      if (this.search) {
        this.jcxmsearch();
      } else {
        this.getData();
      }
    },
    //渲染数据
    getData() {
      // this.$axios({
      // url:
      // URL +
      // "/zsdx-outpatient-service/menzhen/checkStandard/select/selectAll",
      // method: "post",
      // data: { page: this.nowpage, pageSize: this.pagesize },
      // }).then((data) => {
      // console.log(data);
      // if (data.data.code == 200) {
      // this.count = data.data.count;
      // this.tableData = [...data.data.data];
      // }
      // });
      this["tongyong"]({
        name: "JIANCHA_XUANRAN",
        method: "post",
        data: { page: this.nowpage, pageSize: this.pagesize },
      }).then((data) => {
        console.log(data);
        if (data.data.code == 200) {
          this.count = data.data.count;
          this.tableData = [...data.data.data];
        }
      });
    },
    // 添加
    add() {
      console.log(this.form1);
    },
    // 确定添加
    addqued() {
      console.log(this.form1);
      // this.$axios({
      // url: URL + "/zsdx-outpatient-service/menzhen/checkStandard/add/insert",
      // method: "post",
      // data: this.form1,
      // }).then((data) => {
      // console.log(data.data.msg);
      // this.getData();
      // });
      this["tongyong"]({
        name: "JIANCHA_TIANJIA",
        data: this.form1,
      }).then((data) => {
        console.log(data.data.msg);
        this.getData();
      });
    },
    // 修改
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogFormVisible2 = true;
      this.form2 = {
        checkNo: row.checkNo,
        checkName: row.checkName,
        checkType: row.checkType,
        checkPay: row.checkPay,
        checkUnit: row.checkUnit,
        person_no: row.person_no,
      };
    },
    //确定修改,
    editqued() {
      console.log(this.form2);
      // this.$axios({
      // url:
      // URL + "/zsdx-outpatient-service/menzhen/checkStandard/update/update",
      // method: "post",
      // data: this.form2,
      // }).then((data) => {
      // console.log(data.data.msg);
      // this.getData();
      // });
      this["tongyong"]({
        name: "JIANCHA_XIUGAI",
        data: this.form2,
      }).then((data) => {
        console.log(data.data.msg);
        this.getData();
      });
    },
    // 删除
    handleDelete(index, row) {
      console.log(index, row.checkNo);
      /* delFn(
        {
          url:
            URL +
            "//zsdx-outpatient-service/menzhen/checkStandard/delete/" +
            row.checkNo,
          params: { id: row.checkNo },
          method: "post",
        },
        this
      ).then((code) => {
        console.log(code);
        this.getData();
      });*/
      this["tongyong"]({
        name: "JIANCHA_SHANCHU",
        data: { id: row.subjectNo },
      }).then((data) => {
        console.log(data);
        this.getData();
      });
    },
    //查询
    jcxmsearch() {
      // this.$axios({
      // url:
      // URL +
      // "/zsdx-outpatient-service/menzhen/checkStandard/select/selectByName",
      // method: "post",
      // data: {
      // name: this.search,
      // page: this.nowpage,
      // pageSize: this.pagesize,
      // },
      // }).then((data) => {
      // this.tableData = data.data.data;
      // this.count = data.data.count;
      // });
      this["tongyong"]({
        name: "JIANCHA_SEARCH",
        data: {
          name: this.search,
          page: this.nowpage,
          pageSize: this.pagesize,
        },
      }).then((data) => {
        this.tableData = data.data.data;
        this.count = data.data.count;
      });
    },
  },
  created() {
    this.getData({
      nowpage: this.nowpage, //当前页
      pagesize: this.pagesize, //一页显示多少条数据
    });
    this.jcxmsearch({
      nowpage: this.nowpage,
      pagesize: this.pagesize,
    });
  },
};
</script>
<style lang="less" scoped>
.el-pagination {
  text-align: center;
}
.el-input {
  width: 90%;
}
</style>
